<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h2>props的校验</h2>
      <child
        name="pengshao"
        :age="20"
        :sex="1"
        :height="190"
        :money="55000"
        phone="13866667772"
        size="big"
      ></child>
    </div>

    <script src="./lib/vue3.js"></script>
    <script>
      const { createApp } = Vue;

      /*
        String
        Number
        Boolean
        Array
        Object
        Date
        Function
        Symbol
      */

      const Child = {
        props: {
          // name: String,
          // 等价于
          name: {
            type: String,
          },

          age: {
            // 数据表示或
            type: [String, Number],
          },

          sex: {
            // 必填
            type: Number,
            required: true,
          },

          height: {
            // 默认值
            type: Number,
            default: 180,
          },

          money: {
            type: Number,
            // validator表示自定义校验函数，里面需要返回true或者false
            validator(val) {
              // if (val < 20000) {
              //   return false;
              // } else {
              //   return true;
              // }
              return val >= 20000;
            },
          },
          phone: {
            type: String,
            validator(val) {
              const reg = /^1[3456789]\d{9}$/;
              return reg.test(val);
            },
          },
          size: {
            type: String,
            validator(val) {
              return ["small", "default", "big"].includes(val);
            },
          },
        },
        template: `
          <div>child子组件 - {{ name }} - {{ age }} - {{ sex === 1? '男' : '女' }} - {{ height }} - {{ phone }}</div>
        `,
      };

      createApp({
        data() {
          return {};
        },
        components: {
          Child,
        },
      }).mount("#app");
    </script>
  </body>
</html>
